// top列表  二级菜单
$(function () {
    function Li_menu() {
        this.li_last = $("#li-last");
        this.li_menu = $(".li-menu");
        this.bindEvent();
    }
    Li_menu.prototype.bindEvent = function () {
        var _this = this;
        this.li_last.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
    }
    new Li_menu();
})


// 遮罩层协议

$(function () {
    function Mask() {
        this.mask_btn2 = $(".mask-btn2");
        this.top_mask = $(".top-mask");
        this.top_register = $("#top-register");
        this.mask = $(".mask");
        this.span_close = $(".span-close");
        this.mask_btn1 = $(".mask-btn1");
        this.top_login = $("#top-login");
        this.bindEvent();
    }

    Mask.prototype.bindEvent = function () {
        var _this = this;
        this.top_register.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            });
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "register.html";
            });
        });
        this.top_login.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            })
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "login.html";
            })
        });


        this.mask_btn2.click(function () {
            location.href = "goods-details.html";
        })
        this.span_close.click(function () {
            location.href = "goods-details.html";
        })
    }
    new Mask();
})


// header搜索框
$(function () {
    function Header_search() {
        this.input = $("#header-input");
        this.bindEvent();
    }

    Header_search.prototype.bindEvent = function () {
        var _this = this;
        this.input.focus(function () {
            $(_this.input).css({
                borderColor: "#" + "845f3f"
            })
        });
        this.input.blur(function () {
            $(_this.input).css({
                borderColor: "#" + "ddd"
            })
        });
    }
    new Header_search();
})


// ajax 数据渲染
    
var banner = $(".banner");
var word = $(".word");
var con_main = $(".con-main");
var titles = $("title");
var index = location.href.split("#")[1].split("=")[1];
$.ajax("./libs/goods-list.json")
.then(function(res){
    var item = res.data[index];

    var title = `${item.titles}-小米有品`;
            
    titles.html(title);

            var ban = `<div class="ban-small">
            <img class="small-active" src="${item.img1}" alt="">
            <img src="${item.img2}" alt="">
            <img src="${item.img3}" alt="">
            <img src="${item.img4}" alt="">
        </div>
        <div class="ban-list">
            <div class="list-container">
                <div class="list-pic  pic-active">
                    <img src="${item.list1}" alt="">
                </div>
                <div class="list-pic">
                    <img src="${item.list2}" alt="">
                </div>
                <div class="list-pic">
                    <img src="${item.list3}" alt="">
                </div>
                <div class="list-pic">
                    <img src="${item.list4}" alt="">
                </div>
            </div>
        </div>`;
        banner.html(ban); 
        
        
        var word_main = `<div class="word">
        <div class="word-title">
            <h4>${item.title}</h4>
            <p>${item.titlep}</p>
            <span><a href="###">速戳>>></a>${item.titlespan}</span>
        </div>
        <div class="goods-card">
            <div class="goods-price">
                <h3>售价</h3>
                <span>
                    <i>￥</i>
                    <b>${item.priceb}</b>
                    <em>起</em>
                    <del>${item.pricedel}</del>
                    <p>特价</p>
                </span>
            </div>
            <div class="goods-server">
                <h3>服务</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0)"></a>
                        <span>满99元包邮</span>
                        <a href="javascript:void(0)" style="margin-left: 5px;"></a>
                        <span>三方店铺</span>
                    </li>
                    <li>
                        <a href="javascript:void(0)"></a>
                        <span>
                            支持7天无理由退货 (拆封后不支持)
                        </span>
                    </li>
                    <li>
                        <a href="javascript:void(0)"></a>
                        <span>${item.serverspan}</span>
                        <b>(查看商家资质)</b>
                    </li>
                </ul>
            </div>
        </div>
        <div class="goods-shop">
            <div class="place">
                <h3>配送区域</h3>
                <span>
                    北京
                </span>
                <a href="javascript:void(0)">修改</a>
            </div>
            <div class="goods-num">
                <h3>
                    数量
                </h3>
                <button id="reduce">-</button>
                <input type="text" value="1">
                <button id="add">+</button>
            </div>
            <div class="goods-cart">
                <button class="btn1" data-id = ${item.id}><span></span>加入购物车</button>
                <button class="btn2">立即购买</button>
            </div>
        </div>
    </div>`;
    word.html(word_main);
        new Magnifier();
        // 商品数量增加
        $(function(){
            var goods_num = $(".goods-num input");
            var reduce = $("#reduce");
            var add = $("#add");
            add.click(function(){
            var num = goods_num.val();
            num ++;
            goods_num.val(num);
            $(".shopcar span").html(num);
            });
            reduce.click(function(){
                var num = goods_num.val();
                if(num == 1){
                    num = 1;
                }else{
                    num -- ;
                }
            goods_num.val(num);
            $(".shopcar span").html(num);
            })
        })

        $(function(){
            $(".btn1").click(function(){
                var num = $(".shopcar span").val();
                num++;
                $(".shopcar span").html(num);
            })
        })
});


// 放大镜部分
function Magnifier() {
    this.ban_small = $(".ban-small");
    this.list_pic = $(".ban-list .list-pic");
    this.list_container = $(".list-container");
    this.small_pic = $(".ban-small img");
    this.bindEvent();
}
Magnifier.prototype.bindEvent = function () {
    var _this = this;
    this.list_pic.click(function () {
        $(this).addClass("pic-active")
            .siblings().removeClass("pic-active");

        $(_this.small_pic).eq($(this).index(this.list_pic))
            .addClass("small-active")
            .siblings().removeClass("small-active");
    })
}






